<template>
  <el-col :span="span || 6">
    <el-form-item
      :label="label"
      :label-width="labelwidth || '120px'"
      :prop="prop"
      :class="searchFrom ? 'searchFrom' : ''"
    >
      <el-select
        :value="getSelectVal"
        :disabled="disabled"
        :multiple="multiple"
        :clearable="clearable"
        :filterable="filterable"
        :placeholder="phTxt"
        allow-create
        @change="onSelect"
        :style="{ width: selectWidth }"
      >
        <el-option
          v-for="{ label, value } in optionsArr"
          :label="label"
          :value="value"
          :key="value"
        />
      </el-select>
    </el-form-item>
  </el-col>
</template>

<script lang="ts">
import { Component, Prop, Vue, Model, Emit } from "vue-property-decorator";
// model
// other
/** @name 共用_OptionsItem_模型 */
interface OptionsItem {
  label: string;
  value: string | number | object | boolean;
  disabled?: boolean;
  children?: Array<OptionsItem>;
}

@Component({ name: "BaseFormSelect" })
export default class BaseFormSelect extends Vue {
  @Prop(String) ph!: string;
  @Prop(Number) span!: number;
  @Prop(String) prop!: string;
  @Prop(String) label!: string;
  @Prop(Boolean) multiple!: boolean;
  @Prop(Boolean) disabled!: boolean;
  @Prop(Array) options!: OptionsItem[];
  @Prop(Boolean) showAllSelect!: boolean;
  @Prop({ type: Boolean, default: true }) clearable!: boolean;
  @Prop({ type: Boolean, default: false }) filterable!: boolean;
  @Model("change") value!: string;
  @Prop(Boolean) searchFrom?: boolean;
  @Prop({ type: String, default: "120px" }) labelwidth!: string;
  @Prop({ type: String, default: "100%" }) selectWidth!: string;
  @Emit("change")
  onSelect(val: any) {
    this.$emit("onChange", val);
    return val;
  }
  get getSelectVal(): any {
    const value = this.value;
    if (typeof value === "boolean") {
      return value ? 1 : 0;
    }
    if (typeof value !== "number") return value || undefined;

    return value;
  }
  get optionsArr(): OptionsItem[] {
    return this.showAllSelect ? [{ label: "全部", value: -1 }, ...this.options] : this.options;
  }
  get phTxt() {
    const { ph, label } = this;
    return `请选择${ph || label}`;
  }
}
</script>

<style lang="scss">
.searchFrom {
  display: flex !important;
  .el-form-item__label-wrap {
    flex: 0 0 4.3em;
  }
}
</style>
